<template>
	<view class="my_container">
		<CustomNavbarTwo :title="pageTitle" />
		<view class="my_container_body">
			<view class="my_container_body_head"></view>
			<view class="my_container_body_body">
				<view class="time_one" @click="Show">
					<image class="image_t" src="../../static/imags/riqi.png">
					</image>
					<view class="text">
						{{time}}
					</view>
				</view>
				<view class="time_one">
					<image class="image_t" src="../../static/imags/dingwei.png">
					</image>
					<view class="text">
						{{company}}
					</view>
				</view>
				<view class="item" v-for="(item,index) in list" :key="index">
					<view class="item_one">
						<image class="image_t" src="../../static/imags/ren.png">
						</image>
						<view class="text"> 参会人{{index + 1}}
						</view>
						<view class="delete_item" @click="remove(index)"> 删除 </view>
					</view>
					<view class="item_ipput">
						<input v-model="item.name" type="text" placeholder="参会人姓名" />
					</view>
					<view class="item_ipput" style="margin-top: 20rpx;">
						<input v-model="item.phone" type="text" placeholder="参会人手机号码" />
					</view>
				</view>
				<view class="add" @click="add()">
					<image class="add_image" src="../../static/imags/tianjia2.png"></image>
					<view class="add_text">添加会议人</view>
				</view>
				<view class="fotter_button" @click="baoming"> 一键报名 </view>
			</view>
		</view>
		<u-datetime-picker :show="show" v-model="value1" mode="date" @confirm="confirm()"
			@cancel="cancel()"></u-datetime-picker>
	</view>
</template>
<script>
	import CustomNavbarTwo from "@/components/CustomNavbarTwo.vue";
	const api = require('../../util/api.js');
	export default {
		components: { CustomNavbarTwo },
		data() {
			return {
				classId: '',
				pageTitle: "第一期分享会",
				list: [{ name: "", phone: "" }],
				show: false,
				value1: Number(new Date()),
				time: uni.$u.timeFormat(new Date(), 'yyyy-mm-dd'), // 默认当天日期,
				company: "中再生徐州公司"
			};
		},
		onLoad(options) {
			this.classId = options.id;
			this.pageTitle = options.title
		},
		methods: {
			Show() {
				this.show = true
			},
			cancel() {
				this.show = false
				console.log("?")
			},
			confirm(e) {
				const timeFormat = uni.$u.timeFormat
				this.time = timeFormat(e.value, 'yyyy-mm-dd')
				this.show = false
			},
			remove(index) {
				this.list.splice(index, 1)
			},
			add() {
				const item = {
					name: "",
					phone: ""
				}
				this.list.push(item)
			},
			baoming() {
				if (this.time === '年-月-日') {
					uni.showToast({ title: '请选择日期', icon: 'none' });
					return;
				}
				// 验证至少有一个参会人
				if (this.list.length === 0) {
					uni.showToast({ title: '请添加至少一个参会人', icon: 'none' });
					return;
				}
				// 遍历所有参会人信息
				for (let i = 0; i < this.list.length; i++) {
					const item = this.list[i];
					if (!item.name.trim()) {
						uni.showToast({ title: `第${i+1}位参会人姓名未填写`, icon: 'none' });
						return;
					}
					if (!item.phone.trim()) {
						uni.showToast({ title: `第${i+1}位参会人手机号未填写`, icon: 'none' });
						return;
					}
				}
				this.$https.post(this.$api.getRegister, { time: this.time, courseDetailId: this.classId,
					shareUserAddDtoList: this.list }).then((res) => {
					if (res.code === 200) {
						console.log(res);
						uni.showToast({
							title: '报名成功',
							icon: 'none'
						});
						// 报名成功跳转页面
						uni.navigateTo({
							url: '/page/fenxiang/success'
						})
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none'
						});
					}
				});
			}
		},
	}
</script>
<style lang="scss" scoped>
	.my_container {
		width: 100%;

		.my_container_body {
			width: 750rpx;
			height: 1624rpx;
			background: linear-gradient(180deg, #DDFFDE 0%, #F6F6F6 29%, #F6F6F6 100%);
			border-radius: 0rpx 0rpx 0rpx 0rpx;

			.my_container_body_head {
				width: 686rpx;
				height: 166rpx;
			}

			.my_container_body_body {
				width: 686rpx;
				margin-left: 32rpx;

				.time_one {
					width: 686rpx;
					height: 112rpx;
					background: #FFFFFF;
					border-radius: 24rpx 24rpx 24rpx 24rpx;
					display: flex;
					margin-top: 28rpx;

					.image_t {
						width: 48rpx;
						height: 48rpx;
						margin-top: 32rpx;
						margin-left: 32rpx;
					}

					.text {
						height: 112rpx;
						width: 546rpx;
						margin-left: 28rpx;
						line-height: 112rpx;
						font-weight: 400;
						font-size: 28rpx;
						color: #333333;
					}
				}

				.item {
					width: 686rpx;
					height: 364rpx;
					background: #FFFFFF;
					border-radius: 24rpx 24rpx 24rpx 24rpx;

					.item_one {
						width: 686rpx;
						height: 100rpx;
						background: #FFFFFF;
						border-radius: 24rpx 24rpx 24rpx 24rpx;
						display: flex;
						margin-top: 28rpx;

						.image_t {
							width: 48rpx;
							height: 48rpx;
							margin-top: 26rpx;
							margin-left: 32rpx;
						}

						.text {
							height: 100rpx;
							width: 446rpx;
							margin-left: 28rpx;
							line-height: 100rpx;
							font-weight: 400;
							font-size: 28rpx;
							color: #333333;
						}

						.delete_item {
							width: 100rpx;
							height: 60rpx;
							line-height: 60rpx;
							margin-top: 26rpx;
							color: white;
							background: #FF4242;
							text-align: center;
							border-radius: 20rpx;
							font-size: 28rpx;
						}
					}

					.item_ipput {
						width: 622rpx;
						height: 108rpx;
						background: #F5F5F5;
						border-radius: 24rpx 24rpx 24rpx 24rpx;
						margin-left: 32rpx;

						input {
							font-weight: 400;
							font-size: 28rpx;
							color: #777777;
							height: 108rpx;
							border: none;
							padding-left: 28rpx;
						}
					}
				}

				.add {
					margin-top: 34rpx;
					width: 316rpx;
					height: 72rpx;
					border-radius: 100rpx 100rpx 100rpx 100rpx;
					border: 2rpx solid #C9C9C9;
					display: flex;
					margin-left: 186rpx;

					.add_image {
						width: 48rpx;
						height: 48rpx;
						margin-top: 12rpx;
						margin-left: 62rpx;
					}

					.add_text {
						width: 168rpx;
						height: 72rpx;
						font-weight: 400;
						font-size: 28rpx;
						color: #8D8D8D;
						line-height: 72rpx;
						text-align: left;
					}
				}

				.fotter_button {
					width: 686rpx;
					height: 92rpx;
					background: #1EE825;
					border-radius: 100rpx 100rpx 100rpx 100rpx;
					margin-top: 34rpx;
					text-align: center;
					line-height: 92rpx;
					font-weight: 550;
					font-size: 30rpx;
					color: #FFFFFF;
				}
			}
		}
	}
</style>